<template>
  <div class="main_box" style="padding:0 10px 10px 10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ dataInfo.businessShortName }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info">
          <el-row class="header-info">
            <el-col class="header-img__wrapper">
              <!-- style="display:block;width: 100px;height: 100px;border-radius: 50px;overflow: hidden;" -->
              <el-image fit="cover" title="点击可预览" v-if="dataInfo.businessLogo" :src="dataInfo.businessLogo" alt=""
                        :preview-src-list="[dataInfo.businessLogo]"></el-image>
            </el-col>
            <el-col class="text-info">
              <el-col>
                <el-col>商户类型:</el-col>
                <el-col>{{ formatBusinessType(dataInfo.businessType) }} {{
                    detailTypeFilter(dataInfo.detailType)
                  }}
                </el-col>
              </el-col>
              <el-col>
                <el-col>商户全称:</el-col>
                <el-col>{{ dataInfo.businessName }}</el-col>
              </el-col>
              <el-col>
                <el-col>联系人:</el-col>
                <el-col>{{ dataInfo.linkName }}</el-col>
              </el-col>
              <el-col>
                <el-col>联系电话:</el-col>
                <el-col>{{ dataInfo.linkPhone }}</el-col>
              </el-col>
              <el-col>
                <el-col>营业状态:</el-col>
                <el-col v-if="dataInfo.businessState>0">
                  <el-switch
                      v-model="businessState"
                      active-color="#13ce66"
                      inactive-color="#9C9C9E"
                      active-text="营业"
                      inactive-text="打烊"
                      @change="handleChangeBusinessState">
                  </el-switch>
                </el-col>
                <el-col v-else>
                  <span style="color:red;">未开通</span>
                </el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="body-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-row class="info-module">
            <el-col class="title">
              核心信息
            </el-col>
            <el-col class="content">
              <el-row>
                <el-col>商户简称:</el-col>
                <el-col>{{ dataInfo.businessShortName }}</el-col>
              </el-row>
              <el-row>
                <el-col>商户昵称:</el-col>
                <el-col>{{ dataInfo.businessMiniName }}</el-col>
              </el-row>
              <el-row>
                <el-col>
                  经营方式:
                </el-col>
                <el-col>
                  {{ formatManageType(dataInfo.manageType) }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  服务分类:
                </el-col>
                <el-col>
                  {{ serverList.length > 0 ? serverList : "" }}
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col>
                  关联医院:
                </el-col>
                <el-col>
                  {{ dataInfo.hospitalName }}
                </el-col>
              </el-row> -->
              <el-row>
                <el-col>
                  平台商户:
                </el-col>
                <el-col>
                  {{ dataInfo.parentBusinessName ? dataInfo.parentBusinessName : '' }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  商户折扣比例:
                </el-col>
                <el-col>
                  <span>{{ dataInfo.discount }}%</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  打包费折扣比例:
                </el-col>
                <el-col>
                  <span>{{ dataInfo.packageDiscount }}%</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  语音商户:
                </el-col>
                <el-col>
                  <span v-if="dataInfo.voiceFlag">
                    是{{ '(等级：' + dataInfo.voiceLevel + ')' }}
                  </span>
                  <span v-else>
                    否
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  开通周边服务:
                </el-col>
                <el-col>
                  <span v-if="dataInfo.openFlag">
                    已开通
                  </span>
                  <span v-else>
                    未开通
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  营业执照:
                </el-col>
                <el-col>
                  <el-image style="width: 150px;" title="点击可预览" v-if="dataInfo.businessLicense"
                            :src="dataInfo.businessLicense" alt=""
                            :preview-src-list="[dataInfo.businessLicense]"></el-image>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="info-module">
            <el-col>
              联系信息
            </el-col>
            <el-col>
              <el-row>
                <el-col>
                  联系地址:
                </el-col>
                <el-col>
                  {{ linkAddress }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  经纬度:
                </el-col>
                <el-col>
                  {{ dataInfo.longitude }},{{ dataInfo.latitude }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  备用电话:
                </el-col>
                <el-col>
                  {{ dataInfo.linkPhoneTwo }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="info-module">
            <el-col>
              业务信息
            </el-col>
            <el-col>
              <el-row>
                <el-col>
                  推广员:
                </el-col>
                <el-col>
                  {{ promoterName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  维护员:
                </el-col>
                <el-col>
                  {{ keeperName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  创建人:
                </el-col>
                <el-col>
                  {{ dataInfo.createUserName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  修改人:
                </el-col>
                <el-col>
                  {{ dataInfo.modifyUserName }}
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  修改时间:
                </el-col>
                <el-col>
                  {{ dataInfo.modifyDate }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="营业信息" name="second">
          <el-row class="info-module">
            <el-col>
              营业信息
            </el-col>
            <el-col class="content">
              <el-row>
                <el-col>自动营业或打烊:</el-col>
                <el-col>{{ dataInfo.autoOpen ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>支付后自动打印:</el-col>
                <el-col>{{ dataInfo.autoPrint ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>接单后自动打印:</el-col>
                <el-col>{{ dataInfo.autoAcceptPrint ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>自动接单:</el-col>
                <el-col>{{ dataInfo.autoAccept ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>超单数量</el-col>
                <el-col>{{ dataInfo.exceedOrderNum }}</el-col>
              </el-row>
              <el-row>
                <el-col>单次超时未结单时间</el-col>
                <el-col>{{ dataInfo.taskSingleTimeout }}分钟</el-col>
              </el-row>
              <el-row>
                <el-col>总次超时未结单时间</el-col>
                <el-col>{{ dataInfo.taskTotalTimeout }}</el-col>
              </el-row>
              <el-row>
                <el-col>服务员下班方式</el-col>
                <el-col>{{ dataInfo.workOffWay == 1 ? '可自动打卡下班' : '仅手动打卡下班' }}</el-col>
              </el-row>
              <el-row>
                <el-col>服务员接单方式</el-col>
                <el-col>{{ dataInfo.takeOrderWay == 1 ? '仅手动接单' : '可自动接单' }}</el-col>
              </el-row>
              <!-- <el-row>
                <el-col>起步价:</el-col>
                <el-col>{{ dataInfo.startPrice }}</el-col>
              </el-row> -->
              <el-row>
                <el-col>公共服务员配送比例:</el-col>
                <el-col>{{ dataInfo.percentage }}</el-col>
              </el-row>
              <el-row>
                <el-col>打包费折扣比例:</el-col>
                <el-col>{{ dataInfo.packageDiscount }}</el-col>
              </el-row>
              <el-row>
                <el-col>打印模板类型:</el-col>
                <el-col>{{ dataInfo.printModel ? '有价格' : '无价格' }}</el-col>
              </el-row>
              <el-row>
                <el-col>语音单类型:</el-col>
                <el-col>{{ formatVoiceFlag(dataInfo.voiceFlag) }}</el-col>
              </el-row>
              <el-row v-if="dataInfo.voiceFlag">
                <el-col>语音接单等级:</el-col>
                <el-col>{{ dataInfo.voiceLevel }}(等级范围：1-10)</el-col>
              </el-row>
              <el-row>
                <el-col>开通周边服务:</el-col>
                <el-col>{{ dataInfo.openFlag ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>支持线下月结</el-col>
                <el-col>{{ dataInfo.allowMonthSettle ? '是' : '否' }}</el-col>
              </el-row>
              <el-row>
                <el-col>开通电话提醒</el-col>
                <el-col>{{ dataInfo.allowOpenPhone ? '是' : '否' }}</el-col>
              </el-row>

            </el-col>
          </el-row>
          <el-row class="info-module">
            <el-col>
              可售时间
            </el-col>
            <el-col class="content">
              <el-table :data="dataInfo.hours" style="width:fit-content;margin-bottom:10px">
                <el-table-column type="index" width="100" align="center" label="序号">

                </el-table-column>
                <el-table-column label="开始时间" prop="beginHours" width="200" align="center">

                </el-table-column>
                <el-table-column label="结束时间" prop="endHours" width="200" align="center">

                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="提现资质" name="third" v-if="dataInfo.businessState">
          <el-row class="info-module">
            <el-col>
              资质信息
            </el-col>
            <el-col class="content">
              <el-row>
                <el-col>用户类型:</el-col>
                <el-col>{{ accountInfo.userType == 1 ? "企业商户" : "个体工商户" }}</el-col>
              </el-row>
              <el-row>
                <el-col>提现方式:</el-col>
                <el-col>{{ accountInfo.cashType == 1 ? "提现至自有账户" : "提现至上级账户" }}</el-col>
              </el-row>
              <el-row>
                <el-col>提现天数:</el-col>
                <el-col>T+{{ accountInfo.cashDay }}天</el-col>
              </el-row>
              <el-row>
                <el-col>结算方式:</el-col>
                <el-col>{{ accountInfo.settleType == 1 ? "每日结算" : "每月结算" }}</el-col>
              </el-row>
              <el-row v-if="accountInfo.settleType==2">
                <el-col>结算日:</el-col>
                <el-col>{{ accountInfo.settleDay }}</el-col>
              </el-row>
              <el-row>
                <el-col>真实姓名(法人):</el-col>
                <el-col>{{ accountInfo.fullName }}</el-col>
              </el-row>
              <el-row>
                <el-col>手机号(法人):</el-col>
                <el-col>{{ accountInfo.phone }}</el-col>
              </el-row>
              <el-row>
                <el-col>身份证号:</el-col>
                <el-col>{{ accountInfo.idCard }}</el-col>
              </el-row>
              <el-row>
                <el-col>身份证正面照:</el-col>
                <el-col>
                  <el-image style="width: 150px;" title="点击可预览" v-if="accountInfo.idCardFront"
                            :src="accountInfo.idCardFront" alt=""
                            :preview-src-list="[accountInfo.idCardFront]"></el-image>
                </el-col>
              </el-row>
              <el-row>
                <el-col>身份证反面照:</el-col>
                <el-col>
                  <el-image style="width: 150px;" title="点击可预览" v-if="accountInfo.idCardBack"
                            :src="accountInfo.idCardBack" alt=""
                            :preview-src-list="[accountInfo.idCardBack]"></el-image>
                </el-col>
              </el-row>
              <el-row>
                <el-col>企业名称:</el-col>
                <el-col>{{ accountInfo.businessName }}</el-col>
              </el-row>
              <el-row>
                <el-col>企业营业执照:</el-col>
                <el-col>
                  <el-image style="width: 150px;" title="点击可预览" v-if="accountInfo.businessLicense"
                            :src="accountInfo.businessLicense" alt=""
                            :preview-src-list="[accountInfo.businessLicense]"></el-image>
                </el-col>
              </el-row>
              <el-row>
                <el-col>企业联系人姓名:</el-col>
                <el-col>{{ accountInfo.linkName }}</el-col>
              </el-row>
              <el-row>
                <el-col>企业联系人电话:</el-col>
                <el-col>{{ accountInfo.linkPhone }}</el-col>
              </el-row>
              <el-row>
                <el-col>用户开户状态:</el-col>
                <el-col>{{ formatOpenState(accountInfo.openState) }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="经营范围" name="fourth">
          <el-row v-for="item, index in businessVillages" :key="item.type" style="margin-bottom: 20px;">
            <div style="font-size: 14px;color: #1e6abc;margin-bottom: 10px;">
              范围类型 ->
              <el-tag size="mini" effect="dark">
                {{ formatVillageType(item.type) }}
              </el-tag>
            </div>

            <el-table :data="item.villages" style="width:max-content;">
              <el-table-column label="省市区" width="320" align="center" v-if="item.type == 2 || item.type == 4">
                <template slot-scope="scope">
                  <span>{{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.areaName }}{{
                      scope.row.streetName
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column label="小区" width="280" prop="villageName" align="center" v-if="item.type == 2">
              </el-table-column>
              <el-table-column label="呼叫器ID" prop="beeperIds" width="320" align="center" v-if="item.type == 1">
              </el-table-column>
              <el-table-column label="公里数" prop="kilometers" width="320" align="center" v-if="item.type == 3">
              </el-table-column>
              <el-table-column label="起步价" prop="startPrice" width="200" align="center">
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="其它信息" name="fifth">
          <el-row class="info-module">
            <el-col style="margin-bottom:10px">
              营业信息
            </el-col>
            <el-row class="content">


              <el-table :data="banners">
                <el-table-column label="服务分类" width="100">
                  <!-- :src="item.url"
                fit="cover"
                :preview-src-list="formatUrl(list)" -->
                </el-table-column>
                <el-table-column label="轮播图">
                  <template slot-scope="scope">
                    <el-image style="margin-right:10px" v-for="(item,index) in scope.row.list" :src="item.url"
                              :key="index" :preview-src-list="getImgUrlList(scope.row.list)">

                    </el-image>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import BusinessApi from '@/api/business/business';
import ServerClassifyApi from "@/api/server/serverClassify"
import LoginApi from "@/api/system/login"

export default {
  data() {
    return {
      dataInfo: {},
      serverList: [],
      servers: [],
      businessVillages: [],
      roleList: [],
      businessState: true,
      activeName: "first",
      accountInfo: {},
      banks: [],
      banners: [],
    };
  },
  computed: {
    // 把省市区和详细地址合并起来为联系地址
    linkAddress() {
      let streetName = this.dataInfo.streetName ? this.dataInfo.streetName : ""
      let address = this.dataInfo.address ? this.dataInfo.address : ""
      return this.dataInfo.provinceName + this.dataInfo.cityName + this.dataInfo.areaName + streetName + address
    },
    // 根据id获取推广员
    promoterName() {
      if (this.dataInfo.promoterId && this.roleList.length > 0) {
        return this.roleList.find(item => item.id == this.dataInfo.promoterId).name
      }
    },
    // 根据id获取维护员
    keeperName() {
      if (this.dataInfo.keeperId && this.roleList.length > 0) {
        return this.roleList.find(item => item.id == this.dataInfo.keeperId).name
      }
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let id = this.$route.query.id
      BusinessApi.getBusinessInfo({id}).then(res => {
        this.dataInfo = res.data
        this.businessState = res.data.businessState === 1;
        this.servers = res.data.servers
        this.accountInfo = res.data.accountInfo
        this.businessVillages = res.data.businessVillages || []
        this.banks = res.data.accountInfo.banks || []
        let serverClassifyIds = res.data.serverClassifyIds
        this.formatBanners(res.data.banners)
        // 获取服务列表的id和name
        ServerClassifyApi.listIdName().then(res => {
          let list = res.data
          serverClassifyIds.forEach(item => {
            list.find(item2 => {
              if (item == item2.id) {
                this.serverList.push(item2.name)
                return true
              }

            })
          })
          this.serverList = this.serverList.join(",")
        })

        // 获取推广员与维护员列表，两个取同一个列表
        LoginApi.roleInfoList().then(res => {
          this.roleList = res.data
        })

        // 经营时间
        if (res.data.businessBeginHours) {
          this.dataInfo.businessHours = res.data.businessBeginHours + "-" + res.data.businessEndHours
        } else {
          this.dataInfo.businessHours = ""
        }

        // 划分设备地址和联系地址
        this.businessVillages.forEach(item => {
          if (item.houseName) {
            let arr = item.houseName.split("-")
            item.linkName = arr[0]
            item.linkPhone = arr[1]
          }
        })
      })
    },
    getImgUrlList(list) {
      return list.map(item => item.url)
    },
    handleChangeBusinessState() {
      this.$confirm(this.businessState ? '确定营业吗?' : '确定打烊吗?', '提示', {})
          .then((res) => {
            let params = {businessId: this.dataInfo.businessId, businessState: this.businessState ? 1 : 2};
            BusinessApi.setBusinessState(params).then((res) => {
              this.$Utils.notifySuccess('操作成功!');
            });
          }).catch(() => {
        this.businessState = !this.businessState;
      })
    },
    formatBanners(banners) {
      const arr = []
      banners.forEach(item => {
        console.log(item)
        const index = arr.findIndex(item2 => item2.list.some(item3 => item3.serverClassifyId == item.serverClassifyId))
        if (index != -1) {
          arr[index].list.push(item)
        } else {
          arr.push({serverClassifyId: item.serverClassifyId, serverClassifyName: item.serverClassifyName, list: [item]})
        }
      })
      this.banners = arr
      console.log(this.banners)
    },
    formatVoiceFlag(cellValue) {
      if (cellValue === 0) {
        return '无'
      } else if (cellValue === 1) {
        return '普通商户'
      }
      // else if (cellValue === 2) {
      //   return '平台商户'
      // }
    },
    formatBusinessType(cellValue) {
      if (cellValue === 1) {
        return '大众'
      } else if (cellValue === 2) {
        return '专属'
      }
          // else if (cellValue === 3) {
          //   return '平台'
      // }
      else if (cellValue === 4) {
        return '经销'
      }
    },
    formatVillageType(cellValue) {
      if (cellValue === 1) {
        return '专属'
      } else if (cellValue === 2) {
        return '小区'
      } else if (cellValue === 3) {
        return '公里数'
      } else if (cellValue === 4) {
        return '地区'
      }
    },
    formatBusinessState(cellValue) {
      if (cellValue === 0) {
        return '未开通'
      } else if (cellValue === 1) {
        return '营业'
      } else if (cellValue === 2) {
        return '打烊'
      }
    },
    formatBusinessStates(cellValue) {
      if (cellValue === 0) {
        return 'info'
      } else if (cellValue === 1) {
        return 'success'
      } else if (cellValue === 2) {
        return 'warning'
      }
    },
    formatOpenState(val) {
      switch (val) {
        case 1:
          return "待开户"
        case 2:
          return "开户审核中"
        case 1:
          return "开户成功"
        case 2:
          return "开户失败"
      }
    },
    formatManageType(type) {
      switch (type) {
        case 1:
          return "平台"
        case 2:
          return "托管平台运营"
        case 3:
          return "独立运营"
      }
    },
    detailTypeFilter(cellValue) {
      if (cellValue === 1) {
        return ''
      } else if (cellValue === 2) {
        return '- 社区商家'
      } else if (cellValue === 3) {
        return '- 急救商家'
      } else if (cellValue === 4) {
        return '- 社区医院商家'
      } else if (cellValue === 5) {
        return '- 物业商家'
      }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
      // this.$router.push({path: '/business/businessManagement'})
    }
  },
}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/detailType.scss";
</style>

